<template>
  <div class="scroll-view" ref="scroll">
    <div class="scroll-wrap">
      <!-- 下拉刷新... -->
      <div class="pull-down">
        <img :src="pullDownImg" alt :class="{turn: canPullDownLoad}" />
        <span>{{pullDownText}}</span>
      </div>
      <slot />
      <!-- 上拉加载更多... -->
      <div class="pull-up" v-if="canLoadMore">
        <img :src="pullUpImg" alt :class="{turn: canPullUpLoad}" />
        <span>{{pullUpText}}</span>
      </div>
      <div v-else class="info">没有更多数据了~</div>
    </div>
    
  </div>
</template>

<script>
import gifLoading from "../assets/loading.gif";
import arrowImg from "../assets/arrow.jpg";
export default {
  props: {
    isPullDown: Boolean,
    isPullUp: Boolean,
    canLoadMore: Boolean
  },
  data() {
    return {
      pullDownImg: arrowImg,
      pullDownText: "下拉可以刷新...",
      canPullDownLoad: false,
      pullUpImg: arrowImg,
      pullUpText: "上拉可以加载更多...",
      canPullUpLoad: false,
    };
  },
  watch: {
    // 监听外部请求完毕后，就重置下拉刷新的效果
    isPullDown(newVal) {
      if (!newVal) {
        this.pullDownImg = arrowImg;
        this.pullDownText = "下拉可以刷新...";
        this.scroll.scrollTo(0, -50, 300);
      }
    },
    // 监听上拉加载更多完毕
    isPullUp(newVal){
      if(!newVal){
        this.pullUpImg = arrowImg;
        this.pullUpText = '上拉可以加载更多...';
      }
    }
  },
  mounted() {
    // 创建滚动视图
    this.scroll = new IScroll(this.$refs.scroll, {
      tap: true,
      click: true,
      probeType: 3,
    });
    // 更新滚动视图
    this.scroll.on("beforeScrollStart", () => {
      this.scroll.refresh();
    });
    // ⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️下拉刷新
    this.scroll.scrollTo(0, -50, 0);
    this.scroll.on("scroll", () => {
      if (this.isPullDown)
        //正在下拉刷新，不需要做判断了
        return;
      if (this.scroll.y >= 0) {
        this.pullDownText = "释放立即刷新...";
        this.canPullDownLoad = true;
      } else {
        this.pullDownText = "下拉可以刷新...";
        this.canPullDownLoad = false;
      }
    });
    this.scroll.on("scrollEnd", () => {
      if (this.isPullDown)
        //正在下拉刷新，不需要做判断了
        return;
      if (this.scroll.y >= 0) {
        //需要下拉刷新
        this.pullDownImg = gifLoading;
        this.pullDownText = "正在加载中...";
        //通知外部调用组件更新数据
        this.$emit("pullDown");
      } else if (this.scroll.y < 0 && this.scroll.y > -50) {
        //可以看见下拉刷新的结构，需要收回
        this.scroll.scrollTo(0, -50, 300);
      } else {
        //正常情况
      }
    });
    // ⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️下拉刷新


    // ⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️上拉加载更多
    this.scroll.on('scroll', ()=>{
      if(this.isPullUp || !this.canLoadMore)
        return;//还在加载更多
      if(this.scroll.y <= this.scroll.maxScrollY){
        //触发了
        this.canPullUpLoad = true;
        this.pullUpText = '释放立即加载更多...';
      }else{
        //未触发
        this.canPullUpLoad = false;
        this.pullUpText = '上拉可以加载更多...';
      }
    })
    this.scroll.on('scrollEnd', ()=>{
      if(this.isPullUp || !this.canLoadMore)
        return;//还在加载更多
      if(this.scroll.y <= this.scroll.maxScrollY){
        //需要加载更多了
        this.pullUpImg = gifLoading;
        this.pullDownText = '正在加载中...';
        // 通知外部组件去加载更多数据
        this.$emit('pullUp');
      }
      else if(this.scroll.y > this.scroll.maxScrollY && this.scroll.y < (this.scroll.maxScrollY + 50)){
        // 未触发，但是可以看见上拉加载的结构，需要收回
        this.scroll.scrollTo(0, (this.scroll.maxScrollY + 50), 300);
      }
      else{//this.scroll.y >= (this.scroll.maxScrollY + 50)
        //正常的滚动范围，不需要处理
      }
    })
    // ⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️上拉加载更多
  },
};
</script>

<style scoped>
.scroll-view {
  overflow: hidden;
}
.pull-down,
.pull-up,
.info{
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #d9a;
}
.info{
  font-size: 12px;
  color: #555;
}
.pull-down img,
.pull-up img {
  width: 20px;
  margin: 0 5px;
  transition: 300ms;
}
.pull-down img {
  transform: rotate(180deg);
}
.pull-down img.turn {
  transform: rotate(0);
}
.pull-up img.turn{
  transform: rotate(180deg);
}
.pull-down span, .pull-up span{
  font-size: 12px;
  color: #555;
}
</style>